<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>面板示例</title>
	<link rel="stylesheet" type="text/css" href="../../dist/css/hisui.css">
	<script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
	<script src="../jquery-tag-demo.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../dist/js/jquery.hisui.js"></script>
	<link rel="stylesheet" type="text/css" href="../demo.css">
</head>

<body>
	<h2>面板</h2>
	<h3>说明:</h3>
	<span>面板是其他组件或元素的容器</span>
	<h3>一、卡片式面板</h3>
	<div class="demo-exp-code entry-content">
		<div class="use-prettyprint" prettyprintfor="#mypanelpp1">
			<div class="hisui-panel" title="登记（不常用）" style="height:150px;width:400px;padding:20px" data-options="headerCls:'panel-header-card'">
				卡片面板
				<code>headerCls:'panel-header-card'</code>
			</div>
		</div>
		<pre class='lang-html hide' id='mypanelpp1'></pre>
		<div class="use-prettyprint" prettyprintfor="#mypanelpp2">
			<div class="hisui-panel" title="登记（不常用）" style="height:150px;width:400px;padding:20px" data-options="headerCls:'panel-header-card-gray'">
				灰色卡片面板
				<code>"headerCls:'panel-header-card-gray'"</code>
			</div>
		</div>
		<pre class='lang-html hide' id='mypanelpp2'></pre>
	</div>
	<!--<div class="demo-exp-code entry-content">
		<div class="hisui-panel" title="病人信息" style="width:400px;padding:10px 30px 20px 30px" 
		data-options="iconCls:'icon-save',closable:true,collapsible:true,minimizable:true,maximizable:true">
		</div><pre class="prettyprint lang-html"><code>&lt;div class="hisui-panel" title="病人信息" style="width:400px;padding:10px 30px 20px 30px" data-options="iconCls:'icon-save',<br/>closable:true,collapsible:true,minimizable:true,maximizable:true"&gt;&lt;/div&gt;</code></pre>
	</div>-->
	<h3>二、灰色系面板</h3>
	<div class="demo-exp-code entry-content">
		<div class="hisui-panel" title="病人信息" style="width:400px;padding:20px;" 
		data-options="iconCls:'icon-paper',closable:true,collapsible:true,minimizable:true,maximizable:true,headerCls:'panel-header-gray',border:false">
		灰色面板只需修改<code>headerCls:'panel-header-gray'</code>
		</div>
		<pre class="prettyprint lang-html hide"><code>&lt;div class="hisui-panel" title="病人信息" style="width:400px;padding:20px" data-options="headerCls:'panel-header-gray',iconCls:'icon-paper',closable:true,collapsible:true,minimizable:true,maximizable:true"&gt;&lt;/div&gt;</code></pre>
		<!-- 2018-09-17 -->	
		<div class="hisui-panel" title="" style="width:400px;padding:10px 30px 20px 30px;" 
		data-options="iconCls:'icon-paper',bodyCls:'panel-body-gray',closable:true,collapsible:true,minimizable:true,maximizable:true">
		没有标题的灰色面板，只需修改<code>bodyCls:'panel-body-gray'</code>,增加于<code>2018-09-17</code>
		</div>
		<pre class="prettyprint lang-html hide"><code>&lt;div class="hisui-panel panel-header-gray" title="" data-options="..."&gt;&lt;/div&gt;</code></pre>
		
		<div class="hisui-panel" title="灰色 大一点" style="width:400px;padding:10px 30px 20px 30px;" 
		data-options="iconCls:'icon-paper',closable:true,collapsible:true,minimizable:true,maximizable:true,headerCls:'panel-header-big panel-header-gray'">大一点面板
			<code>headerCls:'panel-header-big panel-header-gray'</code>
		</div>
		<pre class="prettyprint lang-html hide"><code>&lt;div data-options="headerCls:'panel-header-big panel-header-gray',..."&gt;&lt;/div&gt;</code></pre>
		<div id="accPanel" title="病人信息" style="width:400px;padding:20px;">
			还可通过js生成
		</div>
		<pre class="prettyprint lang-html hide"><code>&lt;div id="accPanel" title="病人信息" style="width:400px;padding:20px;"&gt;还可通过js生成&lt;/div&gt;</code></pre>
		<pre class="lang-js hide" id="mypanelppjs"></pre>
	</div>
	<!--需求号 2940147 <h3>三、其它色系</h3>
	<div class="demo-exp-code entry-content">
		<div class="hisui-panel" title="白色" style="width:400px;padding:10px 30px 20px 30px;" 
		data-options="iconCls:'icon-paper',closable:true,collapsible:true,minimizable:true,maximizable:true,headerCls:'panel-header-white'">
		白色面板只需修改<code>headerCls:'panel-header-white'</code>
		</div>
		<div style="height: 10px;"></div>
		<div class="hisui-panel " style="width:400px;padding:20px;">
			没标题 没有title
		</div> 
	</div>
    -->
	<script type="text/javascript" class="use-prettyprint" prettyprintfor="#mypanelppjs" >
		var init = function () {
			var valbox = $HUI.panel("#accPanel", {
				iconCls: 'icon-paper',
				closable: true,
				onBeforeClose: function () {
					alert("你点击了关闭!");
					return false
				},
				collapsible: true,
				onBeforeCollapse: function () {
					alert("你点击了收起!");
					return false
				},
				minimizable: true,
				onMinimize: function () {
					alert("你点击了最小化!");
					return false
				},
				maximizable: true,
				onMaximize: function () {
					alert("你点击了最大化!");
					return false
				},
				headerCls: 'panel-header-gray'
			});
		}
		$(init);
	</script>
	
	<table class="table">
		<tr class="protitle">
			<th>属性</th>
			<th>说明</th>
			<th>默认值</th>
			<th></th>
		</tr>
		<tr>
			<td>headerCls</td>
			<td>面板头样式类</td>
			<td>null,表示蓝色</td>
			<td>可选值：<code>'panel-header-gray'</code>,<code>'panel-header-blue'</code>, <code>'panel-header-acc'</code>, <code>'panel-header-white'</code>,<code>'panel-header-card'</code>,<code>'panel-header-card-gray'</code>,<code>'panel-header-big'</code></td>
		</tr>
		<tr>
			<td>bodyCls</td>
			<td>面板内容样式类</td>
			<td>null</td>
			<td>可选值：<code>'panel-body-gray'</code></td>
		</tr>
	</table>
	<prettyprint/>
</body>
</html>